<template>
  <div class="main_box" style="padding:10px;">
    <div class="add_wrap">
        <div class="tit">
            <h2>{{this.pageState}}文 档</h2>
            <el-button type="success" size="small" plain icon="fa fa-mail-forward" @click="returnList" > 返 回</el-button>
        </div>
        <el-form :model="dataForm" ref="dataForm" label-width="200px" :rules="roleRules">
            <el-row>
                <el-form-item label="文档名称" prop="documentName">
                    <el-input :disabled="nameDisabled" placeholder="请输入文档名称" v-model="dataForm.documentName"></el-input>
                </el-form-item>

                <el-form-item label="文档类型" prop="documentType">
                    <el-select v-model="dataForm.documentType" placeholder="请选择文档类型" clearable="">
                        <el-option
                         v-for="item in typeList"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <HospitalSelect @hospitalId="getHospitalId" :id="dataForm.hospitalId" :site="1"></HospitalSelect>
                <InstitutionSelect @institutionId="getInstitutionId" :id="dataForm.institutionId" :site="1"></InstitutionSelect>

                <el-form-item label="文档分类" prop="classifyIdList">
                    <el-cascader
                         v-model="dataForm.classifyIdList"
                         :options="pickClassifyList"
                         :props="{ expandTrigger: 'hover' }"
                         class="filter-item"  style="width: 200px"
                         placeholder="请选择分类" filterable @change="changeClassify">
                    </el-cascader>
                    <!-- &nbsp;<i class="el-icon-warning" v-if="typeState" style="color:red;"></i> -->
                </el-form-item>

                <el-form-item label="文档路径" style="width:100%;" prop="fileUrl">
                    <span v-if="this.dataForm.fileUrl != ''" >
                        <el-link
                            type="primary" target="_blank" :href="this.dataForm.fileUrl" icon="el-icon-finished">
                            {{this.dataForm.fileUrl}}
                        </el-link>
                    </span>
                    <el-button v-if="this.dataForm.fileUrl == ''" size="mini" type="info" plain @click="handleClickUpload">点击上传</el-button>
                </el-form-item>

                <el-form-item label="文档描述" style="width:100%;" prop="documentDesc">
                    <el-input placeholder="请输入文档描述..." type="textarea" style="width:100%;" v-model="dataForm.documentDesc"></el-input>
                </el-form-item>

                <el-form-item label="备注" style="width:100%;" prop="remark">
                    <el-input type="textarea" placeholder="请输入文档备注..." style="width:100%;" v-model="dataForm.remark"></el-input>
                </el-form-item>

            </el-row>

            <el-row>
                <el-form-item>
                    <el-button plain type="success" round @click="sureClick()" >保 存</el-button>
                    <el-button plain type="info" round @click="returnList">取 消</el-button>
                </el-form-item>
            </el-row>
        </el-form>
        <uploadFile ref="uploadFile" @uploadFileList="getUploadFileList" :accept="uploadAccept" folder="document"></uploadFile>
    </div>
  </div>
</template>

<script>
import * as message from "@/constants/message";
import HospitalSelect from '@/components/HospitalSelect';
import InstitutionSelect from "@/components/InstitutionSelect";
import DocumentApi from "@/api/document/document";
import uploadFile from '@/components/UploadFile';
import DocumentClassifyApi from "@/api/document/documentClassify";

export default {
    data(){
        return {
            pageState:"新 增 ",
            nameDisabled:false,
            dataForm:{
                documentName:'',
                documentType:'',
                classifyId:'',
                firstClassifyId:'',
                fileUrl:'',
                fileType:'',
                documentDesc:'',
                hospitalId:'',
                institutionId:'',
                remark:'',
                classifyIdList: [],
            },
            // classifyIdList: [],
            uploadAccept: 'all', // 上传文件类型为all
            pickClassifyList:[], // 二级树状数组对象
            typeState:true, // 分类校验校验
            roleRules:{
                documentName:[
                    {
                        required: true,
                        message: '请输入文档名称',
                        trigger: 'blur'
                    }
                ],
                documentType:[
                    {
                        required: true,
                        message: '请选择文档类型',
                        trigger: 'blur'
                    }
                ],
                classifyIdList:[
                    {
                        required: true,
                        message: '请选择文档分类',
                        trigger: 'change'
                    }
                ]
            },
            typeList:[
                { value:1 , label:"医院文档" },
                { value:2 , label:"医检文档" },
                { value:3 , label:"系统文档" },
            ]
        }
    },
    components:{
        HospitalSelect,InstitutionSelect,uploadFile
    },
    mounted(){
        this.init();
    },
    methods:{
        init(){
            this.$Utils.clearData(this.dataForm);
            if(this.$route.query.id) {
                this.dataForm.documentId = this.$route.query.id
                this.getData();
                this.pageState="编 辑 ";
            };
            this.listItemClassifyTree();
        },
        listItemClassifyTree(query){
            // 获取树状结构表的数据
            let _this = this
            let cond = {
                classifyName: (!query || typeof query !== 'string') ? '' : query
            }
            DocumentClassifyApi.TreeClassify(cond)
                .then(res => {
                setTimeout(() => {
                    _this.pickClassifyList = res.data
                }, 200)
                })
                .catch(error => {
                _this.pickClassifyList = []
                console.error(error)
                })
        },
        changeClassify(val){
            // 选择之后 那数组拆分 拿出第一个值|将后面的值合并为数组后提交
            console.log(val);
            if(val){
                this.typeState = false;
                if(val.length == 1){
                    this.dataForm.firstClassifyId = Number(val[0]);
                }else{
                    this.dataForm.firstClassifyId = Number(val[0]);
                    val.splice(0,1);  // 删除第一个
                    this.dataForm.classifyId = Number(val[0]); //暂时只有两层分类
                }
                console.log("firstClassifyId : "+this.dataForm.firstClassifyId);
                console.log("classifyId : "+this.dataForm.classifyId);
            }else{
                this.typeState = true;
            }
        },
        sureClick() {
            // 提交
            let _this = this
            if(this.typeState == ''){
                _this.$refs.dataForm.validate(valid => {
                    if(valid) {
                        if (this.dataForm.documentId){
                            _this.$confirm(
                                message.MSG_CONFIRM_SAVE_ALTER,
                                message.TITLE_PROMPT
                            ).then(() => {
                                this.editData();
                                this.nameDisabled = true;
                            })
                        }else{
                            _this.$confirm(
                                message.MSG_CONFIRM_SAVE_ADD,
                                message.TITLE_PROMPT
                            ).then(() => {
                                this.addData();
                            })
                        }
                    }
                })
            }else{
                _this.$confirm("请完善文档分类信息，至少选两类", message.TITLE_PROMPT, {})
            }
        },
        getData() {
            // 获取数据
            DocumentApi.getDocument({documentId: this.$route.query.id})
            .then(res => {
                console.log(res.data);
                this.$Utils.bindingBean(this.dataForm,res.data)
                if(res.data.documentType){
                    this.dataForm.documentType = parseInt(res.data.documentType);
                }
                if(res.data.firstClassifyId){
                    this.dataForm.classifyIdList.unshift(String(res.data.firstClassifyId));
                }
                if(res.data.classifyId){
                    this.dataForm.classifyIdList.push(String(res.data.classifyId));
                }
                console.log(this.dataForm.classifyIdList)
                if(this.dataForm.classifyIdList){
                    this.typeState = false;
                }
            })
        },
        editData(){
            // 编辑
            let _this = this
            let cond = {
                documentId: _this.dataForm.documentId,
                documentName: _this.dataForm.documentName,
                documentType: _this.dataForm.documentType,
                classifyId: _this.dataForm.classifyId,
                firstClassifyId: _this.dataForm.firstClassifyId,
                institutionId: _this.dataForm.institutionId,
                hospitalId: _this.dataForm.hospitalId,
                fileUrl: _this.dataForm.fileUrl,
                fileType: _this.dataForm.fileType,
                documentDesc: _this.dataForm.documentDesc,
                remark: _this.dataForm.remark
            }
            DocumentApi.editDocument(cond)
                .then(data => {
                    this.$Utils.notifySuccess();
                    this.returnList();
                });
        },
        addData(){
            // 新增
            let _this = this
            let cond = {
                documentName: _this.dataForm.documentName,
                documentType: _this.dataForm.documentType,
                classifyId: _this.dataForm.classifyId,
                firstClassifyId: _this.dataForm.firstClassifyId,
                institutionId: Number(_this.dataForm.institutionId),
                hospitalId: Number(_this.dataForm.hospitalId),
                fileUrl: _this.dataForm.fileUrl,
                fileType: _this.dataForm.fileType,
                documentDesc: _this.dataForm.documentDesc,
                remark: _this.dataForm.remark
            }
            console.log(cond)
            DocumentApi.addDocument(cond)
                 .then(data => {
                     console.log(data)
                     this.$Utils.notifySuccess()
                     this.returnList()
                 });
        },
        getHospitalId(val) {
            this.dataForm.hospitalId = Number(val)
        },
        getInstitutionId(val) {
            this.dataForm.institutionId = Number(val)
        },
        getUploadFileList(val) {
            // 文件上传
            let _this = this
            if(val){
                _this.dataForm.fileUrl = val[0];
                let fileName = this.dataForm.fileUrl.split("//")[1].split("/");
                _this.dataForm.fileType = fileName[fileName.length-1].split(".")[1];
            }else{
                _this.$Utils.notifyError("请选择需要上传的文档");
                return
            }
            console.log(val[0]);
            console.log(this.dataForm.fileType);

        },
        handleClickUpload(){
            let _this = this
            _this.$refs.uploadFile.handleCreate();
        },
        returnList(){
            // 返回
            this.$store.dispatch('delView', this.$route);
            this.$router.push('/document/documentInfoManagement');
        }
    }
}
</script>

<style lang="scss" src="@/assets/css/views/add.scss" scope>
</style>
